<template>
  <el-container class="main-box">
    <el-main>
      <el-header>
        <div class="top-head">
          <div class="head-text f-w-700">{{user_name}}的计划</div>
          <div class="top-head-content flex flex-a">
            <el-checkbox v-show="time_or_list" v-model="is_week">周计划</el-checkbox>
            <el-checkbox v-show="time_or_list" v-model="is_month">月计划</el-checkbox>
            <el-checkbox v-show="time_or_list" v-model="is_year">年计划</el-checkbox>
<!--            <div v-show="!time_or_list" v-for="(item,index) in header_right" :key="index"-->
<!--                 @click="handleFeatures(item.type)"-->
<!--                 class="top-head-right"-->
<!--            >-->
<!--              <svg-icon class="f-s-16-1"  style="color: #1966E2" class-name="m-r-7" :icon-class="item.url"/>-->
<!--              <div>{{ item.text }}</div>-->
<!--            </div>-->
            <span
              class="top-text"
              @click="time_or_list = !time_or_list"
            >
            {{ time_or_list ? '切换至列表导航视图' : '切换至时间导航视图' }}
        </span>
          </div>
        </div>
      </el-header>
      <el-scrollbar ref="Box" class="person_body">
        <div v-show="time_or_list && is_year" class="my-duty">
          <div class="box-card flex" v-if="time_list.length">
            <div style="border-right: 1px solid #eee; padding-right: 8px">
              <time-line
                style="position: sticky;top: 14px;"
                :items="time_list"
                :is_month="is_month"
                :is_week="is_week"
                @handleShowFold="handleShowFold"
                @handleFold="handleFold"
              />
            </div>


            <div class="m-l-31 flex-1">
              <div v-for="(item, index) in time_list" :key="index" class="month-box"
              >
                <div class="card-head" :ref="'year' + index">
                  <div class="f-s-20 color-1966E2 flex flex-a">
                    <i class="el-icon-arrow-down" :class="['year-arrow', { 'year-arrow-rotate' : item.show_content }]"
                       @click="handleShow(index)"/>

                    <span class="f-w-700">{{ item.index }}</span>
                  </div>
                  <header-features v-show="part_id === user_id && item.contentList.length"
                                   not_clickable
                                   :type_num="user_or_part"
                                   :text="STATUS[item.state]"
                                   :is_text="true"
                                   router_type="plan"
                                   :id="item.planId"
                                   :personal_eit="item.state === '0' || item.state === '2'"
                                   @handleReview="handleReview(item.planId,index)"
                                   @handleDepartment="handleDepartment(index)"

                  />
                </div>
                <!--  第0项取默认值  -->
                <el-collapse-transition>
                  <eit-content :personal_eit="item.index >= new_year && part_id === user_id && (!item.state || item.state === '0' || item.state === '2')"
                               v-show="item.show_content"
                               :userList="userList"
                               isAit
                               is_operating
                               :text_id="item.planId"
                               :is_over_time="true"
                               :is_schedule="true"
                               :text="item.contentList"
                               router_type="plan"
                               :is_add_content="true"
                               :font_size="font_change.font_size"
                               :font_family="font_change.font_family"
                               :type_content="font_change.type_content"
                               :type_on_line="0"
                               @addPlan="addPlan(1,item.planYear,index)"
                               @handleAddDuty="handleAddDuty($event,item.state,index)"
                               @handleEitContent="handleEitContent($event,item.state,index)"
                               @handleDeleteDuty="handleDeleteDuty($event,item.state,index)"
                  />
                </el-collapse-transition>

                <div v-for="(item_month, index_month) in item.children" :key="index_month"
                     v-show="is_month && item.is_fold"
                     class="month-box"
                >
                  <div class="card-head" :ref="'year' + index + 'month' + index_month">
                    <div class="f-s-20 color-1966E2 flex flex-a">
                      <i class="el-icon-arrow-down"
                         :class="['year-arrow', { 'year-arrow-rotate' : item_month.show_content }]"
                         @click="handleShow(index, index_month)"/>
                      <span class="f-w-700">{{ item_month.index }}月</span>
                    </div>
                    <header-features v-show="part_id === user_id && item_month.contentList.length"
                                     not_clickable
                                     :type_num="user_or_part"
                                     :text="STATUS[item_month.state]"
                                     :is_text="true"
                                     router_type="plan"
                                     :id="item_month.planId"
                                     :personal_eit="item_month.state === '0' || item_month.state === '2'"
                                     @handleReview="handleReview(item_month.planId,index,index_month)"
                                     @handleDepartment="handleDepartment(index,index_month)"
                    />
                  </div>
                  <!--  第0项取默认值  -->
                  <el-collapse-transition>
                    <eit-content :personal_eit="item.index >= new_year && part_id === user_id && (!item_month.state || item_month.state === '0' || item_month.state === '2')"
                                 v-show="item_month.show_content"
                                 :userList="userList"
                                 isAit
                                 is_operating
                                 :is_over_time="true"
                                 :is_schedule="true"
                                 :text="item_month.contentList"
                                 :text_id="item_month.planId"
                                 router_type="plan"
                                 :is_add_content="true"
                                 :font_size="font_change.font_size"
                                 :font_family="font_change.font_family"
                                 :type_content="font_change.type_content"
                                 :type_on_line="0"
                                 @addPlan="addPlan(2,item_month.planMonth,index,index_month)"
                                 @handleAddDuty="handleAddDuty($event,item_month.state,index,index_month)"
                                 @handleEitContent="handleEitContent($event,item_month.state,index,index_month)"
                                 @handleDeleteDuty="handleDeleteDuty($event,item_month.state,index,index_month)"
                    />
                  </el-collapse-transition>
                  <div v-for="(item_week, index_week) in item_month.children" :key="index_week"
                       v-show="is_month && is_week && item.is_fold && item_month.is_fold"
                       class="month-box"
                  >
                    <div class="card-head" :ref="'year' + index + 'month' + index_month + 'week' + index_week">
                      <div class="f-s-20 color-1966E2 flex flex-a">
                        <i class="el-icon-arrow-down"
                           :class="['year-arrow', { 'year-arrow-rotate' : item_week.show_content }]"
                           @click="handleShow(index, index_month, index_week)"/>
                        <span class="f-w-700">{{ item_week.index }}周</span>
                      </div>
                      <header-features v-show="part_id === user_id && item_week.contentList.length"
                                       not_clickable
                                       :type_num="user_or_part"
                                       :text="STATUS[item_week.state]"
                                       :is_text="true"
                                       router_type="plan"
                                       :id="item_week.planId"
                                       :personal_eit="item_week.state === '0' || item_week.state === '2'"
                                       @handleReview="handleReview(item_week.planId,index,index_month,index_week)"
                                       @handleDepartment="handleDepartment(index,index_month,index_week)"
                      />
                    </div>
                    <!--  第0项取默认值  -->
                    <eit-content :personal_eit="item.index >= new_year && part_id === user_id && (!item_week.state || item_week.state === '0' || item_week.state === '2')"
                                 v-show="item_week.show_content"
                                 :userList="userList"
                                 isAit
                                 is_operating
                                 :is_over_time="true"
                                 :is_schedule="true"
                                 :text="item_week.contentList"
                                 :text_id="item_week.planId"
                                 router_type="plan"
                                 :is_add_content="true"
                                 :font_size="font_change.font_size"
                                 :font_family="font_change.font_family"
                                 :type_content="font_change.type_content"
                                 :type_on_line="0"
                                 @addPlan="addPlan(3,item_week.planWeek,index,index_month,index_week)"
                                 @handleAddDuty="handleAddDuty($event,item_week.state,index,index_month,index_week)"
                                 @handleEitContent="handleEitContent($event,item_week.state,index,index_month,index_week)"
                                 @handleDeleteDuty="handleDeleteDuty($event,item_week.state,index,index_month,index_week)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="!time_or_list" class="my-duty">
          <div class="box-form">
            <div class="form-content b-b-1">
              <span class="f-s-16">类型:</span>
              <div>
                <el-checkbox v-for="(item, index) in form_type" :key="index"
                             v-model="item.is_checked">{{ item.text }}</el-checkbox>
              </div>
            </div>
            <div class="form-content b-b-1">
              <span class="f-s-16">时间范围:</span>
              <div>
                <el-checkbox v-for="(item, index) in time_range" :key="index"
                             v-model="item.is_checked"
                             @change="handleChangeTime(index)">{{ item.text }}</el-checkbox>
              </div>
            </div>
            <div class="form-content">
              <span class="f-s-16">状态:</span>
              <div>
                <el-checkbox v-for="(item, index) in form_state" :key="index"
                             v-model="item.is_checked">{{ item.text }}</el-checkbox>
              </div>
            </div>
            <div class="form-content">
              <div class="inquire cursor-p" @click="handleInquire">查询</div>
              <el-table
                :data="table_items"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'left'}"
                style="width: 100%;font-size: 16px;"
                border
                :span-method="objectSpanMethod"
              >
                <el-table-column
                  label="日期"
                  width="112"
                >
                  <template slot-scope="{row,$index}">
                    <div style="text-align: center;">
                      {{ row.time_date }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="类型"
                  width="71"
                >
                  <template slot-scope="{row,$index}">
                    <div style="text-align: center;">
                      {{ row.type | typeStr }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  width="90"
                >
                  <template slot-scope="{row,$index}">
                    <div style="text-align: center;">
                      {{ row.status }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="内容"
                >
                  <template slot-scope="{row,$index}">
                    <div style="display: flex;">
                      <span class="content-bit">{{ row.text_index }}</span>
                      <span class="content-text-1" v-html="row.content"></span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="进度"
                  width="92"
                >
                  <template slot-scope="{row,$index}">

                    <div class="flex flex-a">
                      <el-progress color="#1A66E2"
                                   :width="20"
                                   :text-inside="true"
                                   type="circle"
                                   :percentage="Number(row.progress)"
                      />
                      <span
                        class="jin-du">{{ row.progress }}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  align="center"
                  label="附件"
                  width="58"
                >
                  <template slot-scope="{row,$index}">
                    <div v-if="row.fileList.length" @click="handleDown(row,$index)" style="text-align: center;">
                      <svg-icon class="f-s-16-1 cursor-p" icon-class="appraisefujin"/>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-main>
    <el-aside width="300px">
      <mail-list
        class="mail-list"
        :duty_list="duty_list"
        :float_list="float_list"
        :duty_index="1"
        router_type="plan"
        @handleManDuty="handleManDuty"
      />
      <!--      <SideList  />-->
    </el-aside>
    <el-backtop target=".el-main" :visibility-height='hide_position'></el-backtop>
  </el-container>
</template>

<script>

import ModuleHeader from '@/appraise/components/ModuleHeader'
import HeaderFeatures from '@/appraise/components/HeaderFeatures'
import EitContent from '@/appraise/components/EitContent'
import MailList from '@/appraise/components/MailList'
import TimeLine from '@/appraise/components/TimeLine'
import { fileDownload, syncRequest } from '@/utils/httpRequet'

export default {
  name: 'DutyIndex',
  components: {
    ModuleHeader,
    HeaderFeatures,
    EitContent,
    MailList,
    TimeLine
  },
  filters: {
    typeStr: function(value) {
      const str = {
        '1': '年',
        '2': '月',
        '3': '周'
      }
      return str[value]
    }
  },
  data() {
    return {
      hide_position: 30,
      part_id: '',
      user_name: '',
      user_id:'',
      new_year: new Date().getFullYear(),
      user_or_part:1,
      add_plan_id: '',
      STATUS: Object.freeze({
        0: '提交审核',
        1: '待审核',
        2: '已拒绝',
        3: '已通过'
      }),
      form_type: [
        {text:'周计划',type:'3',is_checked:true},
        {text:'月计划',type:'2',is_checked:true},
        {text:'年计划',type:'1',is_checked:true}
      ],
      form_state: [
        {text:'未完成',type:'1',is_checked:false},
        {text:'已完成',type:'3',is_checked:false}
      ],
      time_range: [
        {text:'最近一个月',type:'1',is_checked:false},
        {text:'最近三个月',type:'2',is_checked:false},
        {text:'最近半年',type:'3',is_checked:false},
        {text:'最近一年',type:'4',is_checked:false},
        {text:'最近三年',type:'5',is_checked:false},
        {text:'最近五年',type:'6',is_checked:false}
      ],
      time_range_index:-1,
      header_right: [
        { url: 'appraiseout', text: '导出', type: 0 },
        // { url: 'appraisedy', text: '打印', type: 1 }
        ],
      time_list: [],
      table_items: [],
      is_year: true,
      is_month: true,
      is_week: false,
      font_change: {
        font_size: 1,
        font_family: 1,
        type_content: -1
      },//字体选择
      is_loading: false,
      time_or_list: true,
      duty_list: [
        { url: 'appraisegrzz', title: '个人计划' },
        { url: 'appraisebmzz', title: '部门计划' }
      ],
      float_list: [
        {
          f_name: '我部门成员',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '我关注的部门',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '我关注的人员',
          is_select: false,
          is_unfold: true,
          child: []
        }
      ],
      userList: []
    }
  },
  mounted() {
    const dept_info = syncRequest({
      url: 'pubGetDept',
      data: {
        userId: '',
      }
    })
    if(dept_info.errorCode === '1') {
      this.user_name = dept_info.data.deptName
      this.part_id = dept_info.data.deptId
      this.user_id = this.part_id
      this.initPart(this.part_id)
    }

    const res = syncRequest({ url: 'pubQueryUserList', data: { orgId: '', name: '' } })
    // console.log( '@ 候选人' ,res)
    if (res.errorCode === '1') this.userList = res.data
    this.$nextTick(()=> {
      this.$refs.Box.$el.querySelector('.el-scrollbar__wrap').scrollTo({ top: this.$refs[`year${0}month${11 - new Date().getMonth()}`][0].offsetTop, behavior: 'smooth'})
    })
  },
  methods: {
    //初始化
    init(id) {
      //获取个人所有计划信息
      const user_get_all = syncRequest({
        url: 'planUserGetAll',
        data: {
          userId: id?id:'',
        }
      })
      if(user_get_all.errorCode === '1') {
        this.errorCodeSuccess(user_get_all)
      }else{
        this.$message({
          message: '当年暂无计划',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
    },
    //初始化成功
    errorCodeSuccess(success) {
      this.table_items = []
      this.time_list= success.data
      this.time_list.forEach((res,r_index)=> {
        const boo = r_index === 0
        this.$set(res,'is_fold',boo)
        this.$set(res,'show_content',true)
        res.contentList.forEach(result => {
          this.$set(result,'eit_time',false)
          this.$set(result,'is_eit',false)
        })
        res.children.forEach((item,index) => {
          const boo = index == 11 - new Date().getMonth()
          this.$set(item,'is_fold',boo)
          this.$set(item,'show_content',true)
          item.contentList.forEach(val => {
            this.$set(val,'eit_time',false)
            this.$set(val,'is_eit',false)
          })
          item.children.forEach(val1 => {
            this.$set(val1,'is_fold',false)
            this.$set(val1,'show_content',true)
            val1.contentList.forEach(val2 => {
              this.$set(val2,'eit_time',false)
              this.$set(val2,'is_eit',false)
            })
          })
        })
      })
      this.time_list.forEach(item => {
        item.contentList && item.contentList.forEach((text_item, text_index) => {
          let temp_items = {
            time_date: item.planYear,
            type: 1,
            status: text_item.status,
            text_index: text_index += 1,
            content: text_item.htmlText,
            relateUserList: text_item.relateUserList,
            progress: text_item.progress,
            fileList:text_item.fileList
          }
          this.table_items.push(temp_items)
        })
        item.children && item.children.forEach(children_item => {
          children_item.contentList && children_item.contentList.forEach((text_item, text_index) => {
            let temp_items = {
              time_date: children_item.planMonth.substring(0,4) + '-' + children_item.planMonth.slice(4),
              type: 2,
              status: text_item.status,
              text_index: text_index += 1,
              content: text_item.htmlText,
              relateUserList: text_item.relateUserList,
              progress: text_item.progress,
              fileList:text_item.fileList
            }
            this.table_items.push(temp_items)
          })

          children_item.children && children_item.children.forEach(children_item_item => {
            children_item_item.contentList && children_item_item.contentList.forEach((text_item_item, text_item_index) => {
              let temp_items = {
                time_date:  children_item_item.planWeek.substring(0,4) + '-' + children_item_item.planWeek.slice(4),
                type: 3,
                status: text_item_item.status,
                text_index: text_item_index += 1,
                content: text_item_item.htmlText,
                relateUserList: text_item_item.relateUserList,
                progress: text_item_item.progress,
                fileList:text_item_item.fileList
              }
              this.table_items.push(temp_items)
            })
          })
        })
      })
    },
    //初始化部门
    initPart(id) {
      //获取部门所有计划信息
      const dept_get_all = syncRequest({
        url: 'planDeptGetAll',
        data: {
          deptId: id?id:'',
        }
      })
      if(dept_get_all.errorCode === '1') {
        this.errorCodeSuccess(dept_get_all)
      }else{
        this.$message({
          message: '当年暂无计划',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
    },
    /**
     * @name 新增部门计划
     */
    addPlan(type,year,index,index_month,index_week) {
      let user_add = null
      if(type === 1) {
        user_add = syncRequest({
          url: 'planDeptAddYear',
          data: {
            deptId: this.part_id,
            year
          }
        })
      }else if(type === 2) {
        user_add = syncRequest({
          url: 'planDeptAddMonth',
          data: {
            deptId: this.part_id,
            month:year
          }
        })
      }else{
        user_add = syncRequest({
          url: 'planDeptAddWeek',
          data: {
            deptId: this.part_id,
            weekCode:year
          }
        })
      }
      const errorCode = user_add.errorCode === '1'
      this.$message({
        message: errorCode?'初始化成功':'初始化失败',
        type: errorCode?'success':'warning',
        duration: 2000,
        center: true
      })
      if(errorCode) {
        if (index_week !== undefined) {
          this.time_list[index].children[index_month].children[index_week].planId = user_add.planId
        } else if (index_month !== undefined) {
          this.time_list[index].children[index_month].planId = user_add.planId
        } else {
          this.time_list[index].planId = user_add.planId
        }
      }
    },
    /**
     * @name 新增计划内容
     */
    handleAddDuty(e,state,index,index_month,index_week) {
      const plan_user_add_content = syncRequest({
        url: 'planDeptAddContent',
        method: 'POST',
        data: {
          planId: this.add_plan_id?this.add_plan_id:e.item.planId,
          content: e.item.content,
          progress: e.item.progress,
          endDate: e.item.endDate
        }
      })
      this.add_plan_id = ''
      if(plan_user_add_content.errorCode === '1') {
        if (index_week !== undefined) {
          this.time_list[index].children[index_month].children[index_week].contentList[e.index].planId = e.item.planId
          state==='2'?this.time_list[index].children[index_month].children[index_week].state = '0': ''
        } else if (index_month !== undefined) {
          this.time_list[index].children[index_month].contentList[e.index].planId = e.item.planId
          state==='2'?this.time_list[index].children[index_month].state = '0': ''
        } else {
          this.time_list[index].contentList[e.index].planId = e.item.planId
          state==='2'?this.time_list[index].state = '0': ''
        }
      }
    },
    /** 编辑计划内容
     * @param e 编辑对象
     * @param state 编辑状态
     * @param index 年
     * @param index_month 月
     * @param index_week 周
     */
    handleEitContent(e,state,index,index_month,index_week) {
      const eit_content = syncRequest({
        url: 'planDeptEditContent',
        method: 'POST',
        data: {
          planSubId: e.item.planSubId,
          content: e.item.content,
          progress: e.item.progress,
          endDate: e.item.endDate,
          contentFileList: e.item.contentFileList?e.item.contentFileList:''
        }
      })
      if(eit_content.errorCode === '1') {
        this.$message.success({ message: '编辑成功', center: true })
        if(e.item.contentFileList) {
          const file_obj = {
            attachId: e.item.contentFileList,
            fileName: e.item.fileName
          }
          if (index_week !== undefined) {
            this.time_list[index].children[index_month].children[index_week].contentList[e.index].fileList.push(file_obj)
          } else if (index_month !== undefined) {
            this.time_list[index].children[index_month].contentList[e.index].fileList.push(file_obj)
          } else {
            this.time_list[index].contentList[e.index].fileList.push(file_obj)
          }
        }else{
          if (index_week !== undefined) {
            this.time_list[index].children[index_month].children[index_week].contentList[e.index].fileList = []
          } else if (index_month !== undefined) {
            this.time_list[index].children[index_month].contentList[e.index].fileList = []
          } else {
            this.time_list[index].contentList[e.index].fileList = []
          }
        }
        if(state === '2') {
          if (index_week !== undefined) {
            this.time_list[index].children[index_month].children[index_week].state = '0'
          } else if (index_month !== undefined) {
            this.time_list[index].children[index_month].state = '0'
          } else {
            this.time_list[index].state = '0'
          }
        }
      }
    },
    /**
     * @name 删除计划
     */
    handleDeleteDuty(e,state,index,index_month,index_week) {
      let del_content = syncRequest({
        url: 'planDeptDelContent',
        data: {
          planSubId:e.item.planSubId
        }
      })
      const errorCode = del_content.errorCode === '1'
      this.$message({
        message: errorCode ? '删除成功' : '删除失败',
        type: errorCode ? 'success' : 'error',
        duration: 2000,
        center: true
      })
      if(errorCode && state === '2') {
        if (index_week !== undefined) {
          this.time_list[index].children[index_month].children[index_week].state = '0'
        } else if (index_month !== undefined) {
          this.time_list[index].children[index_month].state = '0'
        } else {
          this.time_list[index].state = '0'
        }
      }
    },
    /**
     *@name 选择时间范围
     */
    handleChangeTime(index) {
      if(this.time_range_index == index) {
        this.time_range[index].is_checked =
          this.time_range_index = -1
        return
      }
      this.time_range.forEach(res=> {
        res.is_checked = false
      })
      this.time_range[index].is_checked = true
      this.time_range_index = index
    },
    /**
     *@name 查询
     */
    handleInquire() {
      const year_list = this.form_type.filter(res=>res.is_checked)
      const state_list = this.form_state.filter(res=>res.is_checked)
      let timeTag = ''
      let planClass = []
      let state = []
      this.time_range.forEach(res=>{
        if(res.is_checked) {
          timeTag = res.type
        }
      })
      if(year_list.length) {
        year_list.forEach(res=> {
          if(res.is_checked) {
            planClass.push(res.type)
          }
        })
      }else{
        this.$message({
          message: '请选择计划类别!',
          type: 'warning',
          duration: 2000,
          center: true
        })
        return
      }
      if(state_list.length) {
        state_list.forEach(res=> {
          if(res.is_checked) {
            state.push(res.type)
          }
        })
      }else{
        this.$message({
          message: '请选择计划状态!',
          type: 'warning',
          duration: 2000,
          center: true
        })
        return
      }
      const query_list = syncRequest({
        url: this.user_or_part === 0?'planUserQueryList':'planDeptQueryList',
        data: {
          userId:this.user_id,
          timeTag,
          planClass,
          state
        }
      })
      if(query_list.errorCode === '1') {
        this.table_items = []
        const data = query_list.data
        data.forEach(item => {
          item.contentList && item.contentList.forEach((text_item, text_index) => {
            const temp_items = {
              time_date: item.planWeek?item.planWeek.substring(0,4) + '-' + item.planWeek.slice(4):item.planMonth?item.planMonth.substring(0,4)+'-'+item.planMonth.slice(4): item.planYear,
              type: item.planWeek?3:item.planMonth?2: 1,
              status: text_item.status,
              text_index: text_index += 1,
              content: text_item.htmlText,
              relateUserList: text_item.relateUserList,
              progress: text_item.progress,
              fileList:text_item.fileList
            }
            this.table_items.push(temp_items)
          })
        })
      }
      console.log(this.table_items)
    },
    /**
     * @name 提交审核
     */
    handleReview(planId,index,index_month,index_week) {
      const submit_audit = syncRequest({
        url: 'planDeptSubmitAudit',
        data: {
          planId
        }
      })
      const errorCode = submit_audit.errorCode === '1'
      if(errorCode) {
        index_week?this.time_list[index].children[index_month].children[index_week].state = '1':
          index_month?this.time_list[index].children[index_month].state = '1':
            this.time_list[index].state = '1'
      }
      this.$message({
        message: errorCode? '提交成功':'提交失败',
        type: errorCode?'success':'error',
        duration: 2000,
        center: true
      })
    },
    /**
     * @name 审核已提交
     */
    handleDepartment(index,index_month,index_week) {
      const content = index_week? '已拒绝:'+ this.time_list[index].children[index_month].children[index_week].refuseReason:
        index_month?'已拒绝:'+ this.time_list[index].children[index_month].refuseReason:'已拒绝:'+ this.time_list[index].refuseReason
      this.$message({
        message: content,
        type: 'error',
        duration: 2000,
      })
    },
    /** 下载
     * @param item 数据对象
     * @param index 附件位置
     */
    handleDown(item, index) {
      fileDownload('fileDownload',{
        param:{ attachId: item.fileList[0].attachId }
      })
    },
    //合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0, 1].includes(columnIndex)) {
        let first_idx = this.table_items.findIndex(
          (item) => item.time_date === row.time_date
        )
        let same_length = this.table_items.filter(
          (x) => x.time_date === row.time_date
        ).length

        return rowIndex === first_idx ? [same_length, 1] : [0, 0]
      }
    },
    /**
     * @name 时间树跳转
     * @param e 年、月、轴index值
     */
    handleFold(e) {
      const scrollWrap = this.$refs.Box.$el.querySelector('.el-scrollbar__wrap')
      if (e.w_index !== undefined) {
        if (!this.time_list[e.y_index].children[e.m_index].children[e.w_index].is_fold) {
          this.time_list[e.y_index].children[e.m_index].children.forEach(
            (res) => (res.is_fold = false)
          )
          this.time_list[e.y_index].children[e.m_index].children[
            e.w_index
            ].is_fold = true
        } else {
          this.time_list[e.y_index].children[e.m_index].children[
            e.w_index
            ].is_fold = true
        }
      } else if (e.m_index !== undefined) {
        if (!this.time_list[e.y_index].children[e.m_index].is_fold) {
          this.time_list[e.y_index].children.forEach((res) => (res.is_fold = false))
          this.time_list[e.y_index].children[e.m_index].is_fold = true
        } else {
          this.time_list[e.y_index].children[e.m_index].is_fold = true
        }
      } else {
        this.time_list[e.y_index].is_fold = true
      }
      this.$nextTick(() => {
        if (e.w_index !== undefined) {
          scrollWrap.scrollTo({ top: this.$refs[`year${e.y_index}month${e.m_index}week${e.w_index}`][0].offsetTop, behavior: 'smooth'})
        } else if (e.m_index !== undefined) {
          scrollWrap.scrollTo({ top: this.$refs[`year${e.y_index}month${e.m_index}`][0].offsetTop, behavior: 'smooth'})
        } else {
          scrollWrap.scrollTo({ top: this.$refs[`year${e.y_index}`][0].offsetTop, behavior: 'smooth'})
        }
      })
    },
    /**
     * @name 时间树折叠
     * @param y_index 年
     */
    handleShowFold(y_index) {
      this.time_list[y_index].is_fold = !this.time_list[y_index].is_fold
    },
    /**
     * @name 人员计划
     */
    handleManDuty(e) {
      this.user_id = e.id
      this.user_name = e.name
      this.user_or_part = e.type
      this.form_type.forEach(res=>res.is_checked = true)
      this.form_state.forEach(res=>res.is_checked = false)
      this.time_range.forEach(res=>res.is_checked = false)
      e.type === 0?this.init(e.id):this.initPart(e.id)
    },
    /**
     * @name 展开
     * @param year_num 年
     * @param month_num 月
     * @param week_num 日
     */
    handleShow(year_num, month_num, week_num) {
      if (week_num !== undefined) {
        this.time_list[year_num].children[month_num].children[week_num].show_content = !this.time_list[year_num].children[month_num].children[week_num].show_content
      } else if (month_num !== undefined) {
        this.time_list[year_num].children[month_num].show_content = !this.time_list[year_num].children[month_num].show_content
      } else if (year_num !== undefined) {
        this.time_list[year_num].show_content = !this.time_list[year_num].show_content
      }
    }
  }
}
</script>

<style scoped lang="scss">
.year-arrow {
  color: #ddd;
  transition: .2s;
  margin-right: 5px;
  cursor: pointer;

  &:hover {
    color: #1966E2;
  }
}
.el-header {
  height: auto !important;
  background-color: #F0F0F3;
  color: #333;
  margin-right: 10px;
  padding-bottom: 10px !important;
}
.year-arrow-rotate {
  transform: rotate(0.5turn);
}
.flex {
  display: flex;
}
::v-deep .el-table__empty-block {
  min-height: 200px;
}
.flex-a {
  align-items: center;
}

.flex-j {
  justify-content: center;
}

.flex-1 {
  flex: 1;
}

.head-text {
  font-size: 20px;
  margin-left: 32px;
}

.f-w-700 {
  font-weight: 700;
}

.color-1966E2 {
  color: #1966E2;
}

.month-box {
  padding-top: 17px;
}

.b-b-1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.jin-du {
  font-size: 16px;
  color: #999999;
  margin-left: 7px;
}

.top-head {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
.top-text {
  padding: 3px 10px;
  margin-left: 15px;
  background-color: #3280FC;
  color: #FFFFFF;
  border-radius: 6px;
  cursor: pointer;
}
.cursor-p {
  cursor: pointer;
}
.top-head-right {
  padding: 1px 10px;
  border: 1px solid #1C66E2;
  color: #1C66E2;
  border-radius: 6px;
  font-size: 16px;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.f-s-16 {
  width: 68px;
  font-size: 16px;
  color: #999999;
  margin-right: 25px;
}
.f-s-16-1 {
  font-size: 16px;
}
.box-form {
  width: 100%;
  background-color: #FFFFFF;
  padding: 16px 14px;
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 0 5px;
  border-radius: 999em;
  display: inline-block;
  user-select: all;
}
.form-content {
  padding: 20px 20px 9px 20px;
  display: flex;
  align-items: center;
  position: relative;
}

.m-l-31 {
  margin-left: 31px;
}

.f-s-20 {
  font-size: 20px;
}

.content-bit {
  width: 17px;
  height: 17px;
  margin-top: 6px;
  border-radius: 1px;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-text-1 {
  flex: 1;
  margin-left: 7px;
  font-size: 16px;
  padding-bottom: 12px;
}

.inquire {
  padding: 6px 14px;
  color: #FFFFFF;
  background-color: #1C66E2;
  border: 1px solid #1C66E2;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 #1C66E2;
  font-size: 16px;
  position: absolute;
  top: -36px;
  right: 20px;
}
.top-head-content > > > .el-checkbox {
  margin-right: 22px;
}
::v-deep .el-checkbox__label {
  font-size: 16px;
}
.el-aside {
  background-color: #E9EEF3;
  padding:0;
}
.main-box {
  font-size: 16px;
  background-color: #E9EEF3;
  user-select: none; padding: 12px;
}
>>> .vxe-modal--header {
  text-align: center;
}
.mail-list {
  width: 100%;
  height: 100%;
}
.my-duty {margin-right: 12px; border-radius: 4px;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
.box-card {
  width: 100%;
  background-color: #ffffff;
  padding: 10px; border-radius: 4px;
}

.card-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.m-b-14 {
  margin-bottom: 10px;
}
.person_body{ width: 100%; height: calc(100vh - 176px);
  .my-duty:last-child{ margin-bottom: 0px; padding-bottom: 0px;}
}
@media (max-width: 1024px) {
  .head-text {
    font-size: 18px;
    margin-left: 32px;
  }
  .jin-du {
    font-size: 14px;
    color: #999999;
    margin-left: 6px;
  }
  .top-head {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .top-head-right {
    padding: 1px 10px;
    border: 1px solid #1C66E2;
    color: #1C66E2;
    border-radius: 6px;
    font-size: 14px;
    margin-left: 15px;
    display: flex;
    align-items: center;
  }
  .f-s-16 {
    width: 68px;
    font-size: 14px;
    color: #999999;
    margin-right: 25px;
  }
  .f-s-16-1 {
    font-size: 14px;
  }
  .f-s-20 {
    font-size: 18px;
  }

  .content-bit {
    width: 17px;
    height: 17px;
    margin-top: 6px;
    border-radius: 1px;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content-text-1 {
    flex: 1;
    margin-left: 7px;
    font-size: 16px;
    padding-bottom: 12px;
  }

  .inquire {
    padding: 6px 14px;
    color: #FFFFFF;
    background-color: #1C66E2;
    border: 1px solid #1C66E2;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 #1C66E2;
    font-size: 14px;
    position: absolute;
    top: -36px;
    right: 20px;
  }
  .top-head-content > > > .el-checkbox {
    margin-right: 22px;
  }
  ::v-deep .el-checkbox__label {
    font-size: 14px;
  }
  .el-aside {
    background-color: #E9EEF3;
    padding:0;
  }
  .main-box {
    font-size: 14px;
    background-color: #E9EEF3;
    user-select: none; padding: 12px;
  }
  >>> .vxe-modal--header {
    text-align: center;
  }
  .mail-list {
    width: 100%;
    height: 100%;
  }
  .my-duty {margin-right: 12px; border-radius: 4px;
  }

  .box-card {
    width: 100%;
    background-color: #ffffff;
    padding: 10px; border-radius: 4px;
  }

  .card-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .flex {
    display: flex;
  }
  .flex-1 {
    flex: 1;
  }
  .m-b-14 {
    margin-bottom: 10px;
  }
  .person_body{ width: 100%; height: calc(100vh - 176px);
    .my-duty:last-child{ margin-bottom: 0px; padding-bottom: 0px;}
  }
}
</style>
